<template>
	<view class="page">
		<div class="form">
			<div class="list">
				<span class="left">姓名</span>
				<span class="right">
					<input type="text" placeholder="请输入姓名" v-model="name" />
				</span>
			</div>
			<div class="list">
				<span class="left">手机号码</span>
				<span class="right">
					<input type="text" placeholder="请输入手机号码" v-model="mobile" />
				</span>
			</div>
			<div class="list">
				<span class="left">上门地址</span>
				<span class="right">
					<span v-if="!address" style="color: #777777;" @click="chooseAdress">请选择上门地址</span>
					<span v-if="address" @click="chooseAdress">{{address}}</span>
					<!-- <input type="text" placeholder="请选择上门地址" @click="chooseAdress" v-model="address"  readonly="true"/> -->
				</span>
			</div>
			<div class="list">
				<span class="left">详细地址</span>
				<span class="right">
					<input type="text" placeholder="请输入详细地址" v-model="detailed_address" />
				</span>
			</div>
			<div class="list">
				<span class="left">设为默认</span>
				<span class="right">
					<switch :checked="is_default" color="#22BF8A" style="transform:scale(0.7)" @change="changeSwitch" />
				</span>
			</div>
		</div>
		<div class="input">
			<button @click="submit">保存</button>
			<loginCom v-if="!hasLogin"></loginCom>
		</div>
	</view>
</template>

<script>
	import loginCom from "@/components/loginCom.vue";
	export default {
		data() {
			return {
				name: '',
				mobile: '',
				address: '',
				detailed_address: '',
				lng: '',
				lat: '',
				is_default: true,
				id: "",
				hasLogin:false,
			}
		},
		components: {
			loginCom
		},
		methods: {
			chooseAdress() {
				var that = this;
				uni.chooseLocation({
					success: (res) => {
						this.address = res.address + res.name;
						this.lng = res.longitude;
						this.lat = res.latitude;
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					},
					fail: (res) => {
						console.log(res)
						wx.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									wx.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												wx.openSetting({
													success: function(data) {
														if (data.authSetting["scope.userLocation"] === true) {
															wx.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//授权成功之后，再调用chooseLocation选择地方
															setTimeout(function() {
																that.chooseAdress()
															}, 1000)
														}
													}
												})
											} else {
												wx.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})

								}
							}
						})
					}
				});
			},
			changeSwitch(event) {
				this.is_default = event.detail.value;

			},
			submit() {
				var params = {
					name: this.name,
					mobile: this.mobile,
					address: this.address,
					detailed_address: this.detailed_address,
					lng: this.lng,
					lat: this.lat,
					is_default: this.is_default ? 1 : 0,
				}
				if (!params.name) {
					uni.showToast({
						title: "请输入姓名！",
						icon: "none"
					});
					return
				}
				if (!params.mobile) {
					uni.showToast({
						title: "请输入手机号码！",
						icon: "none"
					});
					return
				}
				if (!params.address) {
					uni.showToast({
						title: "请选择上门地址！",
						icon: "none"
					});
					return
				}
				if (!params.detailed_address) {
					uni.showToast({
						title: "请输入详细地址！",
						icon: "none"
					});
					return
				}
				if (this.id) {
					params.id = this.id
				}
				this.$post('address/save', params, (res) => {
					uni.showToast({
						title: "保存成功！",
					})
					uni.navigateBack();

				})
			},
			getDetail(id) {
				this.$post('address/addressinfo', {
					id
				}, (res) => {
					this.name = res.name;
					this.address = res.address;
					this.mobile = res.mobile;
					this.detailed_address = res.detailed_address;
					this.lat = res.lat;
					this.lng = res.lng;
					this.is_default = res.is_default == 1;
					this.id = res.id;
				})
			},
		},
		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id);
			}
			this.hasLogin = !!uni.getStorageSync('token');
			console.log(option);
		},
	}
</script>

<style>
	.form {
		font-size: 30rpx;
		color: #333;
		background-color: #FFFFFF;
		padding: 0 40rpx;
		margin-top: 20rpx;
	}

	.form .list {
		padding: 30rpx 0;
		border-bottom: 1px solid #e5e5e5;
		font-size: 30rpx;
		display: flex;
	}

	.form .list:last-child {
		border: none;
	}

	.form .list::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.form .list .left {
		width: 200rpx;
	}

	.form .list .right {
		text-align: right;
	}

	.form .list .right {
		flex: 1;
	}

	.form .list .right image {
		width: 200rpx;
	}

	.input {
		margin: 0 auto;
		width: 630rpx;
		margin-top: 80rpx;
		position: relative;
	}

	.input button {
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		background: #22BF8A;
		border-radius: 8px;
	}

	.card_01 {
		margin-left: 20rpx;
	}

	.card_01 image {
		width: 200rpx;
		height: 200rpx;
	}
</style>
